import { reactive } from 'vue'

export default class SuperTableClass {
    table = reactive({
        tableRef: undefined,
        selection: [], //多选
        columnSettingVisible: false, //列设置
        loading: false,
        headerBtn: {},
        columns: [],
        data: [],
        formRef: undefined,
        pagination: {
            status: false,
            layout: 'prev, pager, next, total, sizes',
            pageSizes: [5, 10, 20, 50, 100],
            background: true,
            page: 1,
            pageSize: 5,
            total: 7,
            style: {},
            position: 'right'
        }
    })
    constructor(superTable = {}) {
        this.table = Object.assign(this.table, superTable)
    }

    // 多选
    selectionChange = selection => {
        this.table.selection = selection
    }

    getListFunc = () => {}
    // 查询
    getList = () => {
        this.table.loading = true
        this.getListFunc()
        setTimeout(() => {
            this.table.loading = false
        }, 200)
    }

    saveFunc = () => {}

    save = async formEl => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (valid) {
                this.saveFunc()
                //console.log('submit!')
            } else {
                console.log('error submit!', fields)
            }
        })
    }

    handleRowChange(type, index, fieldName, row) {
        console.log(type, index, fieldName, row)
    }

    //刷新
    flushTable = () => {
        this.loading = true
        this.table.selection = []
        this.table.data = []
        this.table.pagination.total = 0
        this.table.pagination.page = 1
        this.getList()
        this.loading = false
    }

    //列设置
    handleColumnSetting = () => {
        this.table.columnSettingVisible = true
    }
}

export { SuperTableClass }
